<template>
	<div>
		<div class="ivu-card-head">
			<Input v-model="value" placeholder="请输入..." style="width: 300px"></Input> 
			<Button type="primary" :loading="loading" @click="search">搜索</Button>
		</div>
		 <Tabs type="card" :animated="false" @on-click="tabsSwitch">
	        <TabPane label="试用用户">
			    <Table border  :loading="loading" :columns="columns1" :data="list"></Table>
			    <div class="">
			    	<Page :total="page.total" :page-size="page.pageSize" show-total @on-change="changePage"></Page>
			    </div>
	        </TabPane>
	      	<TabPane label="付费用户">
			    <Table border  :loading="loading" :columns="columns2" :data="list"></Table>
			    <Page :total="page.total" :page-size="page.pageSize" show-total @on-change="changePage"></Page>
	        </TabPane>
	        <TabPane label="流失用户">
			    <Table border  :loading="loading" :columns="columns3" :data="list"></Table>
			    <Page :total="page.total" :page-size="page.pageSize" show-total @on-change="changePage"></Page>
	        </TabPane>
	    </Tabs>
		<ReviewDes :info="info"  @upup="refreshData"></ReviewDes>
	</div>
</template>

<script>
	import ReviewDes from '../review/reviewDes.vue';
    export default {
        data () {
            return {
            	loading: false,
            	value:"",
            	info:{
            		id:"",
            		title:"",
            		show:false,
            		status:4,
            		formItem: {
					},
            	},
            	list:[],
				page:{
            		pageNo:0,
            		total:0,
            		pageSize:4
            	},
                columns: [
                    {
                        title: '用户编号',
                        key: 'user_code',
                    },
                    {
                        title: '公司名称',
                        key: 'hotel_name'
                    },
                    {
                        title: '行业',
                        key: 'industry'
                    },
                    {
                        title: '销售人员',
                        key: 'referrer'
                    },
                    {
                        title: '用户类型',
                        key: 'account_status',
                        render: (h, params) => {
                        	let _account_status={"4":"试用用户","5":"付费用户","6":"流失用户"}
                        	return h('span',_account_status[params.row.account_status])
                        }
                    },
                    {
                        title: '申请时间',
                        key: 'apply_for_time'
                    },
                ]
            }
        },
        components:{
        	ReviewDes
        },
        methods: {
        	tabsSwitch(name){
        		if(name==0){
        			this.info.status="4";
        			this.columns[5].title="申请时间";
        		}else if(name==1){
        			this.info.status="5";
        			this.columns[5].title="付费时间";
        		}
        		else{
        			this.info.status="6";
        			this.columns[5].title="申请/付费时间";
        		}
        		this.refreshData();
        	},
        	refreshData(){
        		this.$ajax({
					url: "/user_management/audit/"+this.info.status,
					method: "get",
					data:{
						"page": this.page.pageNo,
						"size": this.page.pageSize,
						"conditions":this.value
					}
				}).then((d) => {
	//				this.loading=false;
					this.page.total=d.total;
					this.list=d.data;
					console.log(d)
				})
        	},
        	search(){
        		this.refreshData();
        	},
        	changePage(page){
        		this.page.pageNo=page-1;
        		this.refreshData();
        	},
            showDes(index) {
            	console.log(index)
            	this.$ajax({
					url: "/user_management/detail/"+index,
					method: "get",
					data:{
					}
				}).then((d) => {
	//				this.loading=false;
					this.info.title="未审核";
					this.info.formItem=d.data;
					this.info.id=index;
					this.info.show=true;
					console.log(d);
				})
            },
            enable (index) {
                this.$Modal.confirm({
                    title: '确认禁用',
                    content: '<p>是否禁用该用户</p>',
                    onOk: () => {
                        this.$ajax({
							url: "/user_management/enableById/"+index,
							method: "get",
							data: ""
						}).then((d) => {
							if(d.message==="success"){
								this.$Message.success('禁用成功');
								this.refreshData()
							}else{
								this.$Message.warning(d.message);
							}
						})
                    },
                    onCancel: () => {
                    }
                });
            },
            blackList (index) {
            	 this.$Modal.confirm({
                    title: '确认加入黑名单',
                    content: '<p>是否确认加入黑名单</p>',
                    onOk: () => {
                    },
                    onCancel: () => {
                    }
                });
            },
       },
       computed: {
		    columns1(){
		    	let opt1=[
	                {
	                    title: '状态',
	                    key: 'enable',
	                    render: (h, params) => {
	                    	let _enable=params.row.enable=="true"?"启用":"不启用";
	                    	return h('span',_enable)
	                    }
	                },
                	{
	                	title: '操作',
	                    key: 'action',
	                    align: 'center',
	                    width:230,
	                    render: (h, params) => {
	                		return h('div', [
	                        h('Button', {
	                            props: {
	                                type: 'primary',
	                                size: 'small'
	                            },
	                            style: {
	                                marginRight: '5px'
	                            },
	                            on: {
	                                click: () => {
	                                    this.showDes(params.row.id)
	                                }
	                            }
	                        }, '详情'),
	                        h('Button', {
	                            props: {
	                                type: 'success',
	                                size: 'small'
	                            },
	                            style: {
	                                marginRight: '5px'
	                            },
	                            on: {
	                                click: () => {
	                                    this.enable(params.row.id)
	                                }
	                            }
	                        }, '禁用'),
	                         h('Button', {
	                            props: {
	                                type: 'warning',
	                                size: 'small'
	                            },
	                            on: {
	                                click: () => {
	                                    this.blackList(params.row.id)
	                                }
	                            }
	                        }, '加入黑名单')
	                        ])
	                	}
	                }
                ]
		      return [...this.columns,...opt1];
		    },
		    columns2(){
		    	let opt2=[
                	{
                	title: '操作',
                    key: 'action',
                    align: 'center',
                    width:230,
                    render: (h, params) => {
                		return h('div', [
                        h('Button', {
                            props: {
                                type: 'primary',
                                size: 'small'
                            },
                            style: {
                                marginRight: '5px'
                            },
                            on: {
                                click: () => {
                                    this.showDes(params.row.id)
                                }
                            }
                        }, '详情'),
                        h('Button', {
                            props: {
                                type: 'success',
                                size: 'small'
                            },
                            style: {
                                marginRight: '5px'
                            },
                            on: {
                                click: () => {
                                    this.enable(params.row.id)
                                }
                            }
                        }, '禁用')
	                    ])
                	}
                }]
		      return [...this.columns,...opt2];
		    },
		    columns3(){
		    	let opt3=[
                	{
                	title: '操作',
                    key: 'action',
                    align: 'center',
                    width:230,
                    render: (h, params) => {
                		return h('div', [
                        h('Button', {
                            props: {
                                type: 'primary',
                                size: 'small'
                            },
                            style: {
                                marginRight: '5px'
                            },
                            on: {
                                click: () => {
                                    this.showDes(params.row.id)
                                }
                            }
                        }, '详情'),
                         h('Button', {
                            props: {
                                type: 'warning',
                                size: 'small'
                            },
                            on: {
                                click: () => {
                                    this.blackList(params.row.id)
                                }
                            }
                        }, '加入黑名单')
                        ])
                	}
                }]
		      return [...this.columns,...opt3];
		    }
	  },
       mounted() {
			this.$ajax({
				url: "/user_management/audit/"+this.info.status,
				method: "get",
				data:{
					"page": this.page.pageNo,
					"size": this.page.pageSize,
					"conditions":""
				}
			}).then((d) => {
//				this.loading=false;
				this.page.total=d.total;
				this.list=d.data;
			})
		}
    }
</script>
<style>
</style>